<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>WMS仓库管理系统</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <script type="text/javascript" src="lib/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="lib/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="lib/js/functionfield.js"></script>
    <script type="text/javascript" src="lib/js/cookies.js"></script>
    <script type="text/javascript">

        $(function () {
            $.get('htz/role/roleCount',function (res) {
                if (res.obj!=null){
                    var ac = echarts.init(document.getElementById("op"));
                    var roleCoun=[];
                    for (var i = 0; i <res.obj.length ; i++) {
                        var c ={
                            value: res.obj[i].value*100,
                            name: res.obj[i].name
                        }
                        roleCoun.push(c)
                    }
                    console.log(roleCoun)

                    option = {
                        backgroundColor: '#2c343c',

                        title: {
                            text: '角色分布图',
                            left: 'center',
                            top: 20,
                            textStyle: {
                                color: '#ccc'
                            }
                        },

                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },

                        visualMap: {
                            show: false,
                            min: 1,
                            max: 600,
                            inRange: {
                                colorLightness: [0, 1]
                            }
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '50%'],
                                data: roleCoun,
                                roseType: 'radius',
                                label: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                },
                                labelLine: {
                                    lineStyle: {
                                        color: 'rgba(255, 255, 255, 0.3)'
                                    },
                                    smooth: 0.2,
                                    length: 10,
                                    length2: 20
                                },
                                itemStyle: {
                                    color: '#c23531',
                                    shadowBlur: 200,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },

                                animationType: 'scale',
                                animationEasing: 'elasticOut',
                                animationDelay: function (idx) {
                                    return Math.random() * 200;
                                }
                            }
                        ]
                    };


                    ac.setOption(option);
                }else {
                    alert("服务器出错")
                }
            })
        })

    </script>
    <style>
        i.layui-anim {
            display: inline-block
        }
        #workspace .layui-tab-close{
            display: none;
        }
    </style>
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo"><strong>WMS仓库管理系统</strong></div>

            <ul class="layui-nav layui-layout-left">
<!--                <li class="layui-nav-item"><a href="#">盘点</a></li>-->
                <li class="layui-nav-item"><a href="#">商品信息</a></li>
<!--                <li class="layui-nav-item"><a href="#">公告</a></li>-->
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img id="touxian" src="http://t.cn/RCzsdCq" class="layui-nav-img">
                        <span id="name">相信</span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" class="site-demo-active" data-title="个人中心"  data-url="self" data-id="3">基本资料</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;" id="logout">注销</a></li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test" id="cd">
<!--                    <template v-for="func in list">-->
<!--                        <li class="layui-nav-item">-->
<!--                            <a href="javascript:;">{{func.funcName}}</a>-->
<!--                            <template v-for="funcs in func.list">-->
<!--                                <dl class="layui-nav-child">-->
<!--                                    <dd><a href="javascript:;" class="site-demo-active" :data-title="funcs.funcName"  :data-url="funcs.url" :data-id="funcs.id">{{funcs.funcName}}</a></dd>-->
<!--                                </dl>-->
<!--                            </template>-->
<!--                        </li>-->
<!--                    </template>-->
                    <template v-for="func in list">
                        <li class="layui-nav-item">
                            <a href="javascript:;">{{func.title}}</a>
                            <dl class="layui-nav-child">
                                <template v-for="funcs in func.children">
                                    <dd><a href="javascript:;" class="site-demo-active" :data-title="funcs.title"  :data-url="funcs.url" :data-id="funcs.id">{{funcs.title}}</a></dd>
                                </template>
                            </dl>
                        </li>
                    </template>

<!--                    <li class="layui-nav-item">-->
<!--                        <a href="javascript:;">客商管理</a>-->
<!--                        <dl class="layui-nav-child">-->
<!--                            <dd><a href="javascript:;" class="site-demo-active" data-title="客户信息管理"  data-url="CustomerInfo" data-id="20">客户信息管理</a></dd>-->
<!--                            <dd><a href="javascript:;" class="site-demo-active" data-title="提供商信息管理"  data-url="providerManager" data-id="21">提供商信息管理</a></dd>-->
<!--                        </dl>-->
<!--                    </li>-->
<!--                    <li class="layui-nav-item">-->
<!--                        <a href="javascript:;">财政管理</a>-->
<!--                        <dl class="layui-nav-child">-->
<!--                            <dd><a href="javascript:;" class="site-demo-active" data-title="采购单付款"  data-url="purchase_pay" data-id="22">采购单付款</a></dd>-->
<!--                            <dd><a href="javascript:;" class="site-demo-active" data-title="订单付款"  data-url="order_pay" data-id="23">订单付款</a></dd>-->
<!--                        </dl>-->
<!--                    </li>-->
<!--                    <li class="layui-nav-item">-->
<!--                        <a href="javascript:;">审核</a>-->
<!--                        <dl class="layui-nav-child">-->
<!--                            <dd><a href="javascript:;" class="site-demo-active" data-title="采购单审核"  data-url="purchaseOrderExamine" data-id="24">采购单审核</a></dd>-->
<!--                            <dd><a href="javascript:;" class="site-demo-active" data-title="入库单审核"  data-url="In_verify" data-id="25">入库单审核</a></dd>-->
<!--                            <dd><a href="javascript:;" class="site-demo-active" data-title="出库单审核"  data-url="chukuCheck" data-id="26">出库单审核</a></dd>-->
<!--                            <dd><a href="javascript:;" class="site-demo-active" data-title="订单审核"  data-url="order_audit" data-id="27">订单审核</a></dd>-->
<!--                        </dl>-->
<!--                    </li>-->
<!--                    <li class="layui-nav-item">-->
<!--                        <a href="javascript:;">员工操作</a>-->
<!--                        <dl class="layui-nav-child">-->
<!--                            <dd><a href="javascript:;" class="site-demo-active" data-title="验货"  data-url="delivery" data-id="28">验货</a></dd>-->
<!--                            <dd><a href="javascript:;" class="site-demo-active" data-title="上架"  data-url="Shelves" data-id="29">上架</a></dd>-->
<!--                            <dd><a href="javascript:;" class="site-demo-active" data-title="补货"  data-url="addGoods" data-id="30">补货</a></dd>-->
<!--                            <dd><a href="javascript:;" class="site-demo-active" data-title="拣货单"  data-url="picking" data-id="31">拣货</a></dd>-->
<!--                        </dl>-->
<!--                    </li>-->
                </ul>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <!-- <div style="padding: 15px;text-align: center;">内容主体区域</div> -->

            <div class="layui-tab" lay-allowClose="true" lay-filter="demo">
                <ul class="layui-tab-title" >
                    <li class="layui-this" id="workspace">
                        <i class="layui-icon layui-icon-home" style="font-size: 20px; color: rgb(0, 0, 0);"></i>
                    </li>
                </ul>

                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show" >
                        <header>
                            <div id="op" style="width: 600px;height:400px;"></div>
                        </header>
                    </div>
                </div>
            </div>

        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->

        </div>
    </div>


    <script src="lib/jquery-3.4.1.min.js"></script>
    <script src="lib/layui/layui.js"></script>
    <script type="text/javascript" src="lib/vue.js"></script>
    <script type="text/javascript" src="lib/js/index.js"></script>


</body>

</html>